<template>
	<view class="indexContent">
		
		
		<view class="header">
			<image src="../../static/logo.png" ></image>
			<view class="search">
				<image src="../../static/images/search.png" alt="" />
				<input type="text" value="" placeholder="搜索...." placeholder-class="placeholder" @click="toDetail()"/>
			</view>
			<button type="default">搜索</button>
		</view>
		<scroll-view class="navScroll" scroll-x="true" enable-flex   v-if="indexData.kingKongModule">
			<view class="naveItem" :class="{active:navIndex=== -1}" @click="navClick(-1,-1)">推荐</view>
			<view class="naveItem" :class="{active:navIndex === index}"  v-for="(item,index) in indexData.kingKongModule.kingKongList" :key="item.L1Id" @click="navClick(index,item.L1Id)">{{item.text}}</view>
		</scroll-view>
		<scroll-view scroll-y="true" >
			<Recommend v-if="navIndex === -1"></Recommend>
			<CateList v-else :L1Id="L1Id"></CateList>
		</scroll-view>
	</view>
</template>

<script>
	import request from '../../utils/request.js';
	import Recommend from '../../components/Recommend/Recommend.vue'
	import CateList from '../../components/CateList/CateList.vue'
	import { mapActions,mapState } from 'vuex'
	export default {
		//注册组件
		components:{
			Recommend,
			CateList
		},
		data() {
			return {
					navIndex:-1,
					L1Id:-1
				}
		},
		onLoad() {
			// this.getIndexData()
			//触发数据请求
			//方式1
			// this.$store.dispatch('home/getIndexDataActions')
			//方式2 使用mapActions 在method中映射更加简单 
			this.getIndexDataActions();
			
		},
		computed:{
			//在计算属性中，映射vuex中获取到的数据
			//...mapState('模块',['数据'])
			// ...mapState('home',['indexData'])
			//还可以通过函数方式
			...mapState({
				indexData:(state)=>state.home.indexData
			})
		},
		methods: {
			//映射home模块下的actions
			...mapActions('home',['getIndexDataActions','getIndexCatelistActions']),
			//获取首页收据
			// async getIndexData(){
			// 	const res = await request('/getIndexData')
			// 	if(res.status == 200){
			// 		this.indexData = res.categoryData
			// 	}
			// },
			navClick(index,L1Id){
				this.navIndex = index,
				this.L1Id = L1Id
			},
			
		}
	}
</script>

<style lang="stylus">
	.indexContent
		.header
			display: flex
			padding: 10rpx 5rpx
			justify-content: space-between
			align-items: center
			image
				width: 140rpx
				height: 60rpx
			.search
				height: 420rpx
				height: 60rpx
				background: #f5f5f5
				display: flex
				align-items: center
				margin-left: 30rpx
				padding-left: 10rpx
				border: 2rpx solid #ccc
				border-radius: 10rpx
				image
					height: 32rpx
					width: 32rpx
				input 
					width: 360rpx
					height: 60rpx
					margin-left: 10rpx
					.placeholder
						font-size: 20rpx
			button
				width: 144rpx
				height: 60rpx
				line-height: 60rpx
				text-align: center
				font-size: 24rpx
				color: #fff
				background-color: green
				
				
		
		.navScroll
			display: flex
			height: 40rpx
			white-space: nowrap // 不换行
			.naveItem
				height: 100%
				font-size: 24rpx
				padding-left: 10rpx
				padding-right: 10rpx
				text-align: center
				&.active
					color: green
					border-bottom: 3rpx solid green
		.test
			background: #fff
</style>
